<template>
    <div class="add-product-wrapper">
      <el-form label-width="108px" :model="form" ref="form" :rules="rules">
        <el-card style="margin: 20px 20px; font-size: 14px">
          <div slot="header">
            <span>基本信息</span>
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="场馆图片" prop="thumb">
                <oss-image-upload
                  v-model="form.thumb"
                  :limit="1"
                ></oss-image-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="场馆名称" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入场馆名称"
                ></el-input>
              </el-form-item>
            </el-col>
  
            <el-col :span="24">
              <el-form-item label="场馆简介" prop="detail">
                <Editor
                  v-model="form.detail"
                  placeholder="请输入场馆简介"
                  type="url"
                ></Editor>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="场馆联系方式" prop="telephone">
                <el-input v-model="form.telephone" placeholder="请输入场馆联系方式"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
  
        <div class="tc">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-form>
    </div>
  </template>
  
  <script>
  import { getsite, addsite, updatesite } from "@/api/venue/venue";
  export default {
    name: "AddSite",
    dicts: [],
    components: {},
    data() {
      return {
        rules: {
          name: [{ required: true, message: "请输入场馆名称", trigger: "blur" }],
          detail: [{ required: true, message: "请输入场馆简介", trigger: "blur" }],
          thumb: [{ required: true, message: "请上传场馆图片", trigger: "blur" }],
        },
        form: {
          
        },
       
      };
    },
    watch: {
    // 监听路由对象本身
    '$route'(to, from) {
      // 检查参数的变化
      console.log('9999')
      if (to.query.id!== from.query.id) {
        // 参数发生变化时的处理逻辑
        if(to.query.id){
          this.getInfo(to.query.id);
        }else{
          this.form={}
        }
       
      }
    }
  },
    created() {
      const { id } = this.$route.query;
      if (id) {
        this.getInfo(id);
      }
    },
    methods: {
      getInfo(id) {
        getsite(id).then((response) => {
          let  data=response
          if(data.thumb){
            if(data.thumb.indexOf(',')>-1){
              data.thumb=data.thumb.split(',')[0]
            }
          }
          console.log(data)
          this.form =data;
        
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
                updatesite(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
              });
            } else {
                addsite(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
              });
            }
            this.cancel();
          } else {
            // if (this.form.name) {
            //   this.$alert("请填写规格价格", "提示", {
            //     confirmButtonText: "确定",
            //   });
            // } else {
            //   this.$alert("请填写商品名称", "提示", {
            //     confirmButtonText: "确定",
            //   });
            // }
          }
        });
      },
      cancel() {
        this.$tab.closeOpenPage({ path: "/venueManagement/venueManage" });
      },
    },
  };
  </script>
  
  <style lang="stylus">
  .add-product-wrapper {
    padding: 12px;
  
    .content {
      margin: 0 auto;
      width: 75%;
      min-width: 800px;
    }
  
    .sku-wrapper {
      background-color: #f7f8fa;
      padding: 12px;
  
      .sku_sorts {
        .sku_sort {
          background-color: white;
          margin-bottom: 12px;
  
          .label {
            padding: 8px;
          }
  
          .values {
            padding: 8px 0 0 8px;
            border-top: 1px solid $border-color;
            display: flex;
            flex-wrap: wrap;
  
            .value {
              padding: 0 32px 8px 0;
              width: 200px !important;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  
    .img-upload-mini .el-upload--picture-card {
      width: 48px;
      height: 48px;
      line-height: 57px;
    }
  }
  </style>
  